<template>
	<!-- 第一级 -->
	<!-- <el-menu v-if="level==0" router 
  background-color="#F4F8FF" text-color="rgba(50, 50, 50, 1)"  active-text-color="#3D80FF" 
  :default-active='$route.fullPath' 
  > -->
	<el-menu v-if="level==0" router :collapse-transition="false" background-color="#F4F8FF"
		text-color="rgba(50, 50, 50, 1)" active-text-color="#3D80FF" :default-active='$route.matched[1].path'
		:collapse="isCollapse">
		<template v-for="item in data">
			<el-submenu v-if="item.children&&item.children.length" :key="item.id" 
			:index="getUrl(item.resourceUrl)" :route="getRoute(item.resourceUrl)">
				<div slot="title" :style="{'padding-left':(level+1)*10+'px'}">
					<img :src="require('@/'+item.menuIcon)" alt="" v-if="level==0 && item.menuIcon" class="levelImg">
					<!-- <img :src="item.menuIcon" alt="" v-if="level==0" class="levelImg"> -->
					<i class="el-icon-s-fold" v-else></i>
					<span>{{item.menuName}}</span>
				</div>
				<item :data="item.children" :level="level+1" @gopage="gopage"></item>
			</el-submenu>
			<el-menu-item v-else @click="gopage(item)" :key="item.menuName" 
			:index="getUrl(item.resourceUrl)" :route="getRoute(item.resourceUrl)"
				:style="{'padding-left':(level+1)*10+'px'}">
				<i class="el-icon-folder"></i>
				<span class="p">{{item.menuName}}</span>
			</el-menu-item>
		</template>
	</el-menu>
	<!-- 子级 -->
	<div v-else>
		<template v-for="item in data">
			<el-submenu v-if="item.children&&item.children.length" :key="item.id" 
			:index="getUrl(item.resourceUrl)" :route="getRoute(item.resourceUrl)">
				<div slot="title" :style="{'padding-left':(level+1)*10+'px'}">
					<i class="el-icon-s-fold"></i>
					<span>{{item.menuName}}</span>
				</div>
				<item :data="item.children" :level="level+1" @gopage="gopage"></item>
			</el-submenu>
			<el-menu-item v-else @click="gopage(item)" :key="item.menuName" 
			:index="getUrl(item.resourceUrl)" :route="getRoute(item.resourceUrl)"
				:style="{'padding-left':(level+1)*10+'px'}">
				<i class="el-icon-folder"></i>
				<span class="p">{{item.menuName}}</span>
			</el-menu-item>
		</template>
	</div>
</template>
<script>
	export default {
		name: 'item',
		props: {
			data: {
				type: Array
			},
			level: {
				type: Number,
				default: 0
			},
			isCollapse: {
				type: Boolean
			}
		},
		data() {
			return {}
		},
		created() {},
		methods: {
			getRoute(url) {
				const str = url?.split("?")[1];
				const arr = str?.split("&");
				const obj = {};
				arr?.forEach((it) => {
					obj[it.split("=")[0]] = it.split("=")[1];
				});
				return {
					path: url,
					query: obj,
				};
			},
			getUrl(url) {
				return url?.split("?")[0];
			},
			gopage(item) {
				this.$emit('gopage', item);
			},
			handleOpen() {

			},
			handleClose() {

			}
		}
	}
</script>
<style lang="scss" scoped>
	//滚动条
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// border-radius: 5px;
		// background: rgba(14,54,94, 0.1);
	}

	.el-menu {
		border-right: transparent;
		height: calc(100% - 40px) !important;
		height: 100%;
		overflow: auto;
		color: #323232;
		// font-weight: bold;
	}

	//展开的箭头图标
	/deep/.el-submenu.is-opened .el-submenu__icon-arrow {
		// color: rgba(255, 255, 255, 1);
		display: none;
	}

	//合起的箭头图标
	/deep/.el-submenu .el-submenu__icon-arrow {
		// color: rgba(255, 255, 255, 1);
		display: none;
	}

	/deep/.el-submenu__title:hover .el-submenu__icon-arrow {
		color: rgba(255, 255, 255, 1);
	}

	// /deep/.el-submenu__title {
	// }

	//三级图标颜色
	/deep/.el-menu-item i {
		color: #606266;
	}

	//鼠标划过三级菜单变色
	/deep/.el-submenu .el-menu-item:hover i {
		color: rgba(255, 255, 255, 1);
	}

	//二级图标颜色
	/deep/.el-submenu__title i {
		color: #606266;
	}

	//鼠标划过二级菜单变色
	/deep/.el-submenu .el-submenu__title:hover i {
		color: rgba(255, 255, 255, 1);
	}

	/deep/.el-submenu__title {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: bold;
		color: #606266 !important;
		padding-left: 0 !important;
	}

	//白色背景
	/deep/.el-submenu.is-opened .el-submenu__title {
		background-color: #fff !important;
	}

	/deep/.el-submenu.is-opened .el-menu-item {
		background-color: #fff !important;
	}

	.el-menu>.el-submenu.is-opened {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
	}

	/deep/.el-submenu__title:hover {
		background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%);
		border-radius: 10px;
		color: #fff !important;
	}

	/deep/.el-menu-item:hover {
		background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%);
		border-radius: 10px;
		color: #fff !important;
	}

	/deep/.el-menu-item {
		height: 40px !important;
		line-height: 40px !important;
		font-size: 12px;
		// font-weight: 500;
	}

	/deep/.el-menu-item.is-active {
		background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%) !important;
		color: #fff !important;
		border-radius: 6px !important;
	}

	.levelImg {
		width: 20px;
		height: 20px;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	
	// .p{
	// 	display: inline-block;
	//     padding: 0 30px;
	// 	height: 40px;
	// 	line-height: 40px;
	// 	box-sizing: border-box;
	//   }
	// /deep/.el-menu-item.is-active .p{
	//     background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%)!important;
	//     color: #fff!important;
	//     border-radius: 6px!important;
	// }
</style>
